<template>
	<view class="backgroud">
		<view class="top">
			<!-- 返回箭头 -->
			<view>
				<image src="../../static/back666.png" class="back666" mode="heightFix" @tap="backEvent"></image>
			</view>
			<!-- 我的心跳值 -->
			<view class="heartbeatvalue">
				<view class="heartbeattext">Ta的</view>
				<image src="../../static/恋爱值红星.svg" class="heartbeaticon" mode="widthFix"></image>
				<view class="heartbeattext">跳值：{{this.heartrewardta}}</view>
			</view>
		</view>
		<view class="bottom">
			<!-- 提示语 -->
			<view class="tips">
				<view class="tipstext">
					将您的每一次
				</view>
				<image src="../../static/奖励粉心.svg" class="tipsheart" mode="widthFix"></image>
				<view class="tipstext">
					动！化作Ta的心跳值！
				</view>
			</view>
			<!-- 奖项 -->
			<view class="rewardsarea">
				<view class="reward" v-for="(item,index) in rewardlist">
					<view class="score">
						{{item.score}}分
					</view>
					<view class="item">
						{{item.title}}
					</view>
					<view class="button1" @tap="delreward(item.id)">
						删除
					</view>
				</view>
			</view>
			<!-- 一键领取 -->
			<view class="getall">
				<view class="ClaimedRewards" @tap="togetClaimedReward()">
					查看已领取奖励>>
				</view>
				<view class="getallbutton">
					<text class="gettext" @tap="toAddReward()">点击添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.accountId = uni.getStorageSync("id");
			this.cpId = uni.getStorageSync("cpId");
		},
		onShow() {
			uni.request({
				header: {
					token: uni.getStorageSync("token")
				},
				data: {
					accountId: this.cpId
				},
				url: this.$baseUrl + "/reward/getNotClaimedRewards",
				method: 'POST',
				success: (res) => {
					this.rewardlist = res.data
				}
			})


			uni.request({
				header: {
					token: uni.getStorageSync("token")
				},
				data: {
					id: this.cpId
				},
				url: this.$baseUrl + "/user/getHeartReward",
				method: 'POST',
				success: (res) => {
					this.heartrewardta = res.data
				}
			})
		},
		data() {
			return {
				rewardid: "",
				heartrewardta: '',
				cpId: "",
				accountId: "",
				rewardlist: []
			}
		},
		methods: {
			toAddReward() {
				uni.navigateTo({
					url: "/pages/addReward/addReward"
				})
			},

			backEvent() {
				uni.navigateBack(1)
			},
			Claimed(rewardId, rewardscore) {
				uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						id: rewardId,
						score: rewardscore,
						accountId: this.cpId
					},
					url: this.$baseUrl + "/reward/claimedReward",
					method: 'POST',
					success: (res) => {
						uni.request({
							header: {
								token: uni.getStorageSync("token")
							},
							data: {
								accountId: this.cpId
							},
							url: this.$baseUrl + "/reward/getNotClaimedRewards",
							method: 'POST',
							success: (res) => {
								this.rewardlist = res.data
							}
						})

						uni.request({
							header: {
								token: uni.getStorageSync("token")
							},
							data: {
								id: this.cpId
							},
							url: this.$baseUrl + "/user/getHeartReward",
							method: 'POST',
							success: (res) => {
								this.heartrewardta = res.data
							}
						})
						uni.showToast({
							title: "领取成功",
							icon: 'success',
							duration: 1500,
						})
					}
				})
			},
			togetClaimedReward() {
				uni.navigateTo({
					url: "/pages/ClaimedReward/ClaimedReward"
				})
			},
			ClaimedAll() {
				uni.request({
					header: {
						token: uni.getStorageSync("token")
					},
					data: {
						id: this.cpId
					},
					url: this.$baseUrl + "/reward/claimedAllReward",
					method: 'POST',
					success: (res) => {
						if (res.data.type === 'fail') {
							uni.showToast({
								title: "积分不足，请自行领取",
								icon: 'error',
								duration: 1500
							})

						} else if (res.data.type === 'noreward') {
							uni.showToast({
								title: "没有可以领取的奖励",
								icon: 'error',
								duration: 1500
							})
						} else {

							uni.request({
								header: {
									token: uni.getStorageSync("token")
								},
								data: {
									accountId: this.cpId
								},
								url: this.$baseUrl + "/reward/getNotClaimedRewards",
								method: 'POST',
								success: (res) => {
									this.rewardlist = res.data
								}
							})


							uni.request({
								header: {
									token: uni.getStorageSync("token")
								},
								data: {
									id: this.cpId
								},
								url: this.$baseUrl + "/user/getHeartReward",
								method: 'POST',
								success: (res) => {
									this.heartrewardta = res.data
								}
							})


							uni.showToast({
								title: "一键领取成功",
								icon: 'success',
								duration: 1500
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.ClaimedRewards {
		position: absolute;
		bottom: 68px;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.backgroud {
		background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);
		min-height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.back666 {
		height: 16px;
		width: 9px;
		left: 24px;
	}

	.top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 68px;
	}

	.heartbeatvalue {
		margin-top: 25px;
		margin-right: 50px;
		;
		padding-left: 24px;
		width: auto;
		min-height: 36px;
		width: auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 24px;
	}

	.heartbeattext {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 36px;
		line-height: 36px;
		/* identical to box height, or 100% */

		color: #FFFFFF;

	}

	.heartbeaticon {
		display: flex;
		width: 36.72px;
		margin-left: 11.65px;
		margin-right: 11.63px;
	}

	.bottom {
		flex: 1;
		background: #FFFFFF;
		border-radius: 36px 36px 0px 0px;
		display: flex;
		flex-direction: column;
		padding-top: 24px;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;

	}

	.tips {
		min-height: 14px;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		margin-bottom: 24px;
	}

	.tipstext {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 14px;
		/* identical to box height, or 100% */

		/* 带蓝深 */

		color: #121B36;

		opacity: 0.6;
	}

	.tipsheart {
		margin-left: 8.64px;
		margin-right: 8.64px;
		width: 12.72px;
	}

	.rewardsarea {
		height: auto;
	}

	.reward {
		padding: 10px 24px;
		background-color: #FECDCA;
		border-radius: 36px;
		margin-bottom: 24px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.score {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 30px;
		/* identical to box height, or 125% */
		color: #FFFFFF;
	}

	.item {
		height: 18px;
		width: auto;
		color: #FF825A;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 18px;
	}

	.button1 {
		width: 60px;
		height: 30px;
		background-color: #FF825A;
		border-radius: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 100;
		font-size: 14px;
		line-height: 14px;
		/* identical to box height, or 117% */
		box-sizing: border-box;
		text-align: center;

		color: #FFFFFF;
	}

	.button2 {
		width: 60px;
		height: 30px;
		background-color: transparent;
		border-radius: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 12px;
		line-height: 14px;
		/* identical to box height, or 117% */
		box-sizing: border-box;
		text-align: center;
		border-style: solid;
		border-color: white;
		color: #FFFFFF;
	}

	.getall {
		width: auto;
		flex: 1;
		display: flex;
		justify-content: center;
		padding-bottom: 24px;

	}

	.getallbutton {
		margin-top: auto;
		/* 橙 */
		width: 100vw;
		background: #FF825A;
		/* identical to box height, or 100% */
		height: 50px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 36px;

	}

	.gettext {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 24px;
		/* identical to box height, or 100% */

		text-align: center;

		color: #FFFFFF;
	}
</style>